<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        img{
            vertical-align: top;
        }
        .wrap{
            width: 1000px;
            height: 800px;
            background: url(img/bg2.jpg) no-repeat;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -400px;
            margin-left: -500px;
        }
        .iphone{
            width: 356px;
            height: 679px;
            background: url(img/iphone.png) no-repeat;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -178px;
            margin-top: -338.5px;
        }
        .list{
            width: 318px;
            height: 498px;
            margin: 47px 0 0 19px;
            padding: 20px;
            overflow: auto;
            box-sizing: border-box;

        }
        .list li::after{
            content: '';
            display: block;
            clear: both;
        }
        .list img{
            width: 35px;
            height: 40px;
        }
        .list p{
            width: 230px;
            box-sizing: border-box;
            padding: 10px;
            border-radius: 10px;
        }
        .nav{
            height: 60px;
            background: #e5e5e5;
            width: 318px;
            margin-left:19px;
        }
        .nav::after{
            content: '';
            display: block;
            clear: both;
        }
        .nav img{
            padding: 10px 0 0 16px;
            float: left;
        }
        .nav input{
            float: left;
            width: 190px;
            height: 40px;
            border: none;
            background: #fff;
            border-radius: 10px;
            margin: 11px 0 0 13px;
        }
        .nav button{
            width: 64px;
            height: 40px;
            font: 16px / 40px "微软雅黑";
            color: #e15671;
            margin-top: 11px;
            text-align: center;
            border: none;
            background: none;
        }
        .right,.left{
            margin-bottom: 20px;
        }
        .right img{
            float: right;
        }
        .right p{
            float: right;
            background: #bab3ce;
            color: #fff;
            margin-right: 13px;
        }
        .left img{
            float: left;
        }
        .left p{
            float: left;
            background: #e5e5e5;
            margin-left: 13px;
        }
        ::-webkit-scrollbar
        {
            width: 5px;  /*滚动条宽度*/
            border-radius: 2.5px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="iphone">
            <ul class="list">
                <li class="right">
                    <img src="img/monster2.jpg" alt="">
                    <p>想我吗！</p>
                </li>
                <li class="left">
                    <img src="img/monster.jpg" alt="">
                    <p>好想你哦，狗子！</p>
                </li>
                <li class="right">
                    <img src="img/monster2.jpg" alt="">
                    <p>切，我不想</p>
                </li>
                <li class="left">
                    <img src="img/monster.jpg" alt="">
                    <p>坏人，不过我喜欢</p>
                </li>
                <li class="right">
                    <img src="img/monster2.jpg" alt="">
                    <p>睡觉去</p>
                </li>
            </ul>
            <div class="nav">
                <img style='height: 35px;width: 35px; ' id='head_img' src="img/monster2.jpg" alt="">
                <input id='send_text' type="text">
                <button id="send">发送</button>
            </div>
        </div>
    </div>
    <script>
        /*
        1.获取nav下的头像元素，绑定事件；
        2.事件：切换头像：
        3.获取nav下的button元素,绑定事件
        4.事件：以当前头像身份发送信息，添加li到ul
        */
        var onOff=true;
        var head_img=document.getElementById('head_img');
        var send_text=document.getElementById('send_text');
        var send=document.getElementById('send');
        var talk_list=document.querySelector('.list');
        var sRegex1='http.*monster\.jpg';
        var sRegex2='http.*monster2\.jpg';
        var re1=new RegExp(sRegex1);
        var re2=new RegExp(sRegex2);
        var iphone=document.querySelector('.iphone');

        head_img.onclick=function () {
            if (onOff==true){
                head_img.src='img/monster.jpg';
            }else{
                head_img.src='img/monster2.jpg';
            }
            onOff=!onOff;
        };
        send.onclick=function () {
            // console.log(head_img.src);
            // console.log(re2.test(head_img.src));
            if (send_text.value==''){
                alert('不能发送空信息!');
                return false;
            }
            if (re2.test(head_img.src)){
                talk_list.innerHTML+='<li class="right">'+'<img src="img/monster2.jpg" alt="">'+'<p>'+send_text.value+'</p>'+'</li>';
            }else if(re1.test(head_img.src)){
                talk_list.innerHTML+='<li class="left">'+'<img src="img/monster.jpg" alt="">'+'<p>'+send_text.value+'</p>'+'</li>';
            }
            send_text.value=='';
            console.log(talk_list.scrollHeight);
        console.log(talk_list.clientHeight);
        if (talk_list.scrollHeight>talk_list.clientHeight) {
                talk_list.scrollTop = talk_list.scrollHeight;
            }
        };
    </script>
</body>
</html>